<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="drawer_mobile">
        <title>Configuration, methods and events of Kendo UI Mobile Drawer</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Set direction of the Kendo UI Mobile Drawer container, use methods to show and hide it.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/mobile/ui/drawer.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/mobile/ui/drawer.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendomobileuidrawer"><a href="#kendomobileuidrawer">kendo.mobile.ui.Drawer</a></h1>

<p>Represents the Kendo UI Mobile Drawer widget. Inherits from <a href="/api/javascript/mobile/ui/mobilewidget">kendo.mobile.ui.View</a>.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-container">
<a href="#configuration-container">container </a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h3>

<p>Specifies the content element to shift when the drawer appears. Required if the drawer is used outside of a mobile application.</p>

<h4>Drawer outside of a mobile application</h4>

<pre><code>&lt;div id="drawer"&gt;
    &lt;h3&gt;Sports&lt;/h3&gt;
    &lt;a href="#" data-target="baseball" class="drawer-link active"&gt;Baseball&lt;/a&gt;
    &lt;a href="#" data-target="golf" class="drawer-link"&gt;Golf&lt;/a&gt;
&lt;/div&gt;

&lt;div id="content-container"&gt;
    &lt;a id="drawer-trigger" href="#"&gt;&lt;span&gt;Show drawer&lt;/span&gt;&lt;/a&gt;
    &lt;div id="baseball" class="inner-content"&gt;
        &lt;h3&gt;Baseball&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div id="golf" class="inner-content"&gt;
        &lt;h3&gt;Golf&lt;/h3&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    $(function() {
        $("#drawer").kendoMobileDrawer({
            container: "#content-container"
        });

        $("#drawer-trigger").click(function() {
            $("#drawer").data("kendoMobileDrawer").show();
            return false;
        });

        $(".drawer-link").click(function() {
            $("#drawer").data("kendoMobileDrawer").hide();
            $(".drawer-link").removeClass("active");
            $(this).addClass("active");
            return false;
        });

        $(".drawer-link").click(function(){
              $(".inner-content").hide();
              $("#"+$(this).data("target")).show();
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-position">
<a href="#configuration-position">position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: 'left')</em>
</h3>

<p>The position of the drawer. Can be <code>left</code> (default) or <code>right</code>.</p>

<h4>Right positioned drawer</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="my-drawer" data-position="right"&gt;
    Hi!
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-swipeToOpen">
<a href="#configuration-swipeToOpen">swipeToOpen </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>If set to <code>false</code>, swiping the view will not activate the drawer. In this case, the drawer will only be open by a designated button.</p>

<p><code>swipeToOpen</code> should be disabled for browsers, which use side swiping gestures for back/forward navigation, such as iOS Safari. Otherwise, users should swipe from an inner part of the view, and not from the view edge.</p>

<h3 id="configuration-swipeToOpenViews">
<a href="#configuration-swipeToOpenViews">swipeToOpenViews </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>A list of the view ids on which the drawer will appear when the view is swiped. If omitted, the swipe gesture will work on all views.
The option has effect only if <code>swipeToOpen</code> is set to <code>true</code>.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
    &lt;a href="#bar" data-role="button"&gt;Go to bar&lt;/a&gt;
&lt;/div&gt;

&lt;div data-role="view" id="bar"&gt;
    Drawer will not be revealed when the view is swiped
    &lt;a href="#drawer-settings" data-role="button"&gt;Back to settings&lt;/a&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="my-drawer" data-swipe-to-open-views='["drawer-settings"]'&gt;
    Hi!
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h4>Drawer with swipe to open set to false</h4>

<pre><code>&lt;div data-role="view"&gt;
    &lt;a href="#foo" data-rel="drawer" data-role="button"&gt;Drawer&lt;/a&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="foo" data-swipe-to-open="false"&gt;
    &lt;div data-role="header"&gt;
        &lt;div data-role="navbar"&gt;
            &lt;span data-role="view-title"&gt;Hello World!&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;ul data-role="listview"&gt;
        &lt;li&gt;Foo&lt;/li&gt;
    &lt;/ul&gt;

    &lt;div data-role="footer"&gt;
       &lt;div data-role="navbar"&gt;
           &lt;a data-align="right" data-role="button"&gt;Details&lt;/a&gt;
       &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-title">
<a href="#configuration-title">title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text to display in the Navbar title (if present).</p>

<h3 id="configuration-views">
<a href="#configuration-views">views </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>A list of the view ids on which the drawer will appear. If omitted, the drawer will work on any view in the application.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
    &lt;a href="#bar" data-role="button"&gt;Go to bar&lt;/a&gt;
&lt;/div&gt;

&lt;div data-role="view" id="bar"&gt;
    Drawer will not work here
    &lt;a href="#drawer-settings" data-role="button"&gt;Back to settings&lt;/a&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="my-drawer" data-views='["drawer-settings"]'&gt;
    Hi!
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-destroy"><a href="#methods-destroy">destroy</a></h3>

<p>Prepares the <strong>Drawer</strong> for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.</p>

<blockquote>
<p><strong>Important:</strong> This method does not remove the Drawer element from DOM.</p>
</blockquote>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
    &lt;a data-role="button" data-click="destroyDrawer"&gt;Destroy Drawer&lt;/a&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="my-drawer"&gt;
    Hi!
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
function destroyDrawer() {
    $("#my-drawer").data("kendoMobileDrawer").destroy();
}
&lt;/script&gt;
</code></pre>

<h3 id="methods-hide"><a href="#methods-hide">hide</a></h3>

<p>Hide the Drawer</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="my-drawer"&gt;
    Hi!
    &lt;a data-click="hideDrawer" data-role="button"&gt;Hide me&lt;/a&gt;
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
function hideDrawer() {
    $("#my-drawer").data("kendoMobileDrawer").hide();
}
&lt;/script&gt;
</code></pre>

<h3 id="methods-show"><a href="#methods-show">show</a></h3>

<p>Show the Drawer</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
    &lt;a data-click="showDrawer" data-role="button"&gt;Show drawer&lt;/a&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="my-drawer"&gt;
    Hi!
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();

function showDrawer() {
    $("#my-drawer").data("kendoMobileDrawer").show();
}
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-afterHide"><a href="#events-afterHide">afterHide</a></h3>

<p>Fired after the mobile Drawer has been hidden.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="foo" data-after-hide="onAfterHide"&gt;
    Foo
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();

function onAfterHide(e) {
    console.log(e);
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.mobile.ui.Drawer</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-beforeShow"><a href="#events-beforeShow">beforeShow</a></h3>

<p>Fires before the mobile Drawer is revealed. The event can be prevented by calling the <code>preventDefault</code> method of the event parameter.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
&lt;/div&gt;

&lt;div data-role="drawer" data-before-show="prevent"&gt;
    I will not be displayed
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();

function prevent(e) {
    e.preventDefault();
}
&lt;/script&gt;
</code></pre>

<h3 id="events-hide"><a href="#events-hide">hide</a></h3>

<p>Fired when the mobile Drawer is closed by the user.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="foo" data-hide="onHide"&gt;
    Foo
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();

function onHide(e) {
    console.log(e);
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.mobile.ui.Drawer</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-init"><a href="#events-init">init</a></h3>

<p>Fired when the mobile Drawer and its child widgets are initialized.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="foo" data-init="onInit"&gt;
    Foo
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();

function onInit(e) {
    console.log(e);
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.mobile.ui.Drawer</code>
</h5>

<p>The widget instance which fired the event.</p>

<h3 id="events-show"><a href="#events-show">show</a></h3>

<p>Fires when the Drawer is shown.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="foo" data-show="onShow"&gt;
    Foo
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();

function onShow(e) {
    console.log(e);
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.sender <code>kendo.mobile.ui.Drawer</code>
</h5>

<p>The widget instance which fired the event.</p>

<h2 id="fields"><a href="#fields">Fields</a></h2>

<h3 id="fields-visible">
<a href="#fields-visible">visible </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Holds information about the current state of the Drawer. If it is currently opened then the visible field will be set to true.</p>

<h4>Example - get the current Drawer state</h4>

<pre><code>&lt;div data-role="view" id="drawer-settings" data-show="onShow"&gt;
    &lt;h1&gt;Settings&lt;/h1&gt;
&lt;/div&gt;

&lt;div data-role="drawer" id="my-drawer"&gt;
    Hi!
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
function onShow(){
    var isVisible = $('#my-drawer').getKendoMobileDrawer().visible;
    console.log(isVisible); //will output false
}
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

